<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">修改资料</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></view>
				</view>
			</block>
		</cu-custom>
		<view class="cu-form-group margin-top">
			<view class="title">头像</view>
			<image :src="getAvatar(form.avatar)" mode="" class="cu-avatar lg round"></image>
		</view>
		<view class="cu-form-group">
			<view class="title">昵称</view>
			<input placeholder="请输入昵称" v-model="form.nickName"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">性别</view>
			<radio-group v-model="form.gender">
				<label class="radio"><radio value="1" :checked="form.gender == '1'"/>男</label>
				<label class="radio margin-left-sm"><radio value="2" :checked="form.gender == '2'"/>女</label>
			</radio-group>
		</view>
		<view class="cu-form-group">
			<view class="title">手机号</view>
			<input placeholder="请输入手机号" v-model="form.mobile"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">邮箱</view>
			<input placeholder="请输入邮箱" v-model="form.email"></input>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">个性签名</view>
			<textarea placeholder="请输入个性签名" v-model="form.signature"></textarea>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">地址选择</view>
			<picker mode="region" @change="regionChange" :value="region">
				<view class="picker">
					{{form.province?form.province + '，':''}}
					{{form.city?form.city + '，':''}}
					{{form.area || ''}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">详细地址</view>
			<textarea placeholder="请输入详细地址" v-model="form.address"></textarea>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue margin-tb-sm lg" @tap="submit">
				<text class="cuIcon-loading2 cuIconfont-spin" v-if="isLoad"></text>保存
			</button>
		</view>
	</view>
</template>

<script>
	import WxValidate from '@/common/WxValidate.js'
	import { modify } from '@/api/blog/member/member.js'
	export default {
		data() {
			return {
				isLoad: false,
				form: {
					nickName: '',
					avatar: '',
					gender: '',
					mobile: '',
					email: '',
					signature: '',
					province: '',
					city: '',
					area: '',
					address: ''
				},
				region: ['', '', '']
			};
		},
		onLoad(options){
			this.initValidate()
		},
		onShow(){
			const userInfo = this.$cache.get(this.$cache.key.userInfo)
			this.form = this.$tools.mergeObjSamePro(this.form, userInfo)
			this.region = [userInfo.province || '', userInfo.city || '', userInfo.area || '']
		},
		methods: {
			initValidate() {
			    const rules = {
					nickName:{
						maxlength: 10
					},
					signature:{
						maxlength: 30
					},
					mobile:{
						tel: true
					},
					email:{
						email:true,
					},
					address:{
						maxlength: 30
					}
			    }
			    const messages = {
					nickName:{
						maxlength: '昵称最大长度10'
					},
					signature:{
						maxlength: '个性签名最大长度30'
					},
					mobile:{
						tel: '手机号格式错误'
					},
					email:{
						email: '邮箱格式错误',
					},
					address:{
						maxlength: '详细地址最大长度30'
					}
			    }
			    this.WxValidate = new WxValidate(rules, messages)
			},
			regionChange(e) {
				this.region = e.detail.value
				this.form.province = this.region[0]
				this.form.city = this.region[1]
				this.form.area = this.region[2]
			},
			getAvatar(avatar) {
				return this.$tools.getImg(avatar, '/static/logo.png')
			},
			submit() {
				if (this.isLoad) {
					return false
				}
				this.isLoad = true
				const form = this.form
				if (!this.WxValidate.checkForm(form)) {
					const error = this.WxValidate.errorList[0]
					this.$tools.showToast({
					  msg: error.msg
					})
					this.isLoad = false
					return false
				}
				modify(form).then(res => {
					this.isLoad = false
					if (res.code === 1) {
						this.$cache.put(this.$cache.key.userInfo, res.data)
						this.$tools.showToast({
							msg:'保存成功',
							icon:'success',
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},2000)
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
